<template>
	<slide>
		<view class="formbar" slot="slide-content">
			<view class="form" v-show="step == 0">
				<view class="form-group">
					<block v-for="(item, index) in reportData" :key="index">
						<view class="form-item" v-if="!item.isHide">
							<text class="form-item-header">{{item.label}}：</text>
							<view class="form-item-body" v-if="item.type== 'input'">
								<input class="form-control" type="text" placeholder="" v-model="item.value"/>
							</view>
							<view class="form-item-body" v-else-if="item.type== 'coord'">
								<view class="coord">
									<view class="coord-group">
										<view class="coord-item">
											<input class="form-control" type="text" v-model="item.x"/>
										</view>
										<view class="coord-item">
											<input class="form-control" type="text" v-model="item.y"/>
										</view>
									</view>
									<view class="coord-btn" @tap="reLocation">位置校正</view>
								</view>
							</view>
							<view class="form-item-body" v-else-if="item.type== 'sate'">
								<view class="sate">
									<view class="sate-group">
										<view class="sate-item">
											<input class="form-control" type="text" placeholder="" v-model="item.value"/>
										</view>
									</view>
									<view class="sate-btn" @tap="bindClick($event, item.field)">获取</view>
								</view>
								
							</view>
							<view class="form-item-body" v-else-if="item.type== 'select'">
								<picker :value="item.index" :range="item.options" range-key="name"
									@change="bindPickerChange($event, item.field)">
									<view class="select">
										<view class="select-selected">
											{{ item.value | getDictLabel(item.options, 'id', 'name') || '请选择' }}
										</view>
										<view class="select-btn">
											<image class="select-btn-icon" :src="require('@/static/images/shangbao_07.png')"></image>
										</view>
									</view>
								</picker>
							</view>
							
							<view class="form-item-body" v-else>
								<view class="textarea">
									<textarea class="form-control2" v-model="item.value" />
									<text class="textarea-bot">{{200 - item.value.length}}/200</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<!-- 返回的表单 -->
			<view class="form form-a" v-show="step == 1">
				<view class="form-group">
					<view class="form-item" v-for="(item, index) in retData" :key="index">
						<view class="form-item-header">{{item.label}}：</view>
						<view class="form-item-body" v-if="item.type== 'select'">
							<picker :value="item.index" :range="item.options" range-key="name"
								@change="bindPickerChange($event, item.field)">
								<view class="select">
									<view class="select-selected">
										{{ item.value | getDictLabel(item.options, 'id', 'name') || '请选择' }}
									</view>
									<view class="select-btn">
										<image class="select-btn-icon" :src="require('@/static/images/shangbao_07.png')"></image>
									</view>
								</view>
							</picker>
						</view>
						<view class="form-item-body" v-else-if="item.type== 'cals'" >
							<picker mode="date" @change="bindDateChange($event, item.field)">
								<view class="cals">
									<view class="cals-selected">
										{{ item.value }}
									</view>
									<view class="cals-btn">
										<image class="cals-btn-icon" :src="require('@/static/images/clock_03.png')"></image>
									</view>
								</view>
							</picker>
						</view>
						<view class="form-item-body" v-else>
							<input class="form-control" type="text" placeholder="" v-model="item.value"/>
						</view>
					</view>
				</view>
			</view> 
			
			<view class="list-photo" v-show="step == 2">
				<view class="list-group">
					<view class="list-item" v-for="(updateImageUrl, index) in updateImageUrls" :key="index">
						<view class="card card-a">
							<view class="card-content">
								<image class="pic" :src="updateImageUrl.url" mode="aspectFit"></image>
							</view>
							<view class="card-del" @click="delImage(index)">
								<image class="card-del-icon" src="@/static/images/icon_del.png"></image>
							</view>
						</view>
					</view>
					<view class="list-item">
						<view class="card card-a" @tap="chooseImage">
							<view class="card-content">
								<image class="icon-add" src="@/static/images/icon_add.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view> 
			
			<view class="btns">
				<view class="btns-group">
					<view class="btns-item">
						<button class="btn" @tap="next">
							{{ step == 2 ? '提交': '下一步'}}
						</button>
					</view>
				</view>
			</view>
		</view>
	</slide>
</template>

<script>
import { uploadFile, chooseImage} from '@/util/util.js';
import {getCategoryOne, getCategoryTwo, getFacilitiesTableField, insertFacility, imagesRelevanceFacility} from '../../util/api.js'
import Slide from '@/pages/collect/slide.vue';
import URL from '../../util/url.js'
export default {
	components: {
		Slide
	},
	props: {
		position: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			userInfo: {},
			reportData: [{
				type: 'input',
				label: '当前区域',
				field: 'area',
				value: ''
			},{
				type: 'sate',
				label: '卫星个数',
				field: 'satellite',
				value: '',
				isHide: true
			},{
				type: 'coord',
				label: '当前坐标',
				field: 'coordinate',
				value: [],
				x: '',
				y: ''
			}, {
				type: 'select',
				label: '一级分类',
				field: 'categoryOne',
				value: '',
				index: '',
				options: []
			}, {
				type: 'select',
				label: '二级分类',
				field: 'categoryTwo',
				value: '',
				index: '',
				options: []
			},{
				type: 'area',
				label: '自定义',
				field: 'remark',
				value: '',
			}],
			retData: [],
			rets: [],
			step: 0,
			facilityId: '',
			updateImageUrls: [],
		}
	},
	methods: {
		clearData() {
			this.updateImageUrls = [];
			
			this.reportData.forEach( item => {
				if(item.field == 'categoryOne'){
					item.value = '';
					item.index = '';
				} else if(item.field == 'categoryTwo') {
					item.value = '';
					item.index = '';
					item.options = [];
				} if (item.field == 'remark') {
					item.value = '';
				} else {
					
				}
			})
		},
		delImage(index) {
			this.updateImageUrls.splice(index, 1);
		},
		async chooseImage() {
			let {tempFilePaths} = await chooseImage({});
			
			let config = {
				url: URL.Upload2,
				tempFilePath: tempFilePaths[0],
				data: {},
				name: 'file'
			}
			
			let {fileName} = await uploadFile(config);
			
			let url = `${URL.FACTORY_FILE_URL}${fileName.replace('/profile/', '')}`;
			let obj = {fileName, url};
			
			this.updateImageUrls.push(obj);
		},
		setVal(val) {
			this.reportData.forEach( item => {
				if(item.field == 'area') {
					item.value = val.address;
				} else if (item.field == 'coordinate') {
					item.value = [val.longitude, val.latitude]
					item.x = `X坐标 ${item.value[0]}`;
					item.y = `Y坐标 ${item.value[1]}`;
				} else if(item.field == 'satellite') {
					item.value = val.satellite;
					item.isHide = !Boolean(this.userInfo.deivceNum);
				}else {
					
				}
			})
		},
		async getAllDicts(){
			let ds = [getCategoryOne()];
			let dits = await Promise.all(ds);
			let categoryOne = this.reportData.find(item => item.field == 'categoryOne');
			
			categoryOne.options = dits[0]['data'];
		},
		async getCategoryTwo(field) {
			let categoryOne = this.reportData.find(item => item.field == 'categoryOne');
			let categoryTwo = this.reportData.find(item => item.field == 'categoryTwo');
			
			categoryTwo.index = '';
			categoryTwo.value = '';
			categoryTwo.options = [];
			
			this.$nextTick(async () => {
				let params = {
					category1: categoryOne.value
				}
				let { data } = await getCategoryTwo(params);
				
				categoryTwo.options = data.slice(0);
			})
		},
		bindPickerChange(e, field){
			let data = this.step == 0 ? this.reportData : this.retData; 
			let index = e.detail.value;
			let select = data.find(item => item.field == field);
			
			if( select.options.length == 0) return ;
			
			select.index = index;
			select.value = select.options[index]['id'];
			
			if(field == 'categoryOne'){
				this.getCategoryTwo(field)
			}
		},
		bindDateChange(e, field) {
			let data = this.step == 0 ?this.reportData : this.retData; 
			
			let date = e.detail.value;
			let cals = data.find(item => item.field == field);
			
			cals.value = date ;
		},
		
		bindClick(e, field){
			let satellite = this.reportData.find(item => item.field == field);
			
			this.$emit('getsatellite');
		},
		reLocation() {
			this.$emit('reLocation')
		},
		async getFacilitiesTableField() {
			let categoryTwo = this.reportData.find(item => item.field == 'categoryTwo');
			
			if(categoryTwo.value == '') {
				uni.showToast({
				  title: '二级分类不能为空',
				  icon: 'none',
				  duration: 2000
				})
				
				return ;
			}
			
			let params = {
				tableId: categoryTwo.value
			}
			
			let {data} = await getFacilitiesTableField(params);
			
			this.rets = [];
			
			if( data.length > 0 ){
				this.rets = data.slice(0);
				
				let retData = data.map( item => {
					let retItem = {
						label: item.cn_name,
						field: item.col_name,
						value: item.value || ''
					};
					
					if(item.style_type  == 1){
						retItem.type = 'input';
					} else if(item.style_type  == 2) {
						retItem.type = 'cals';
					} else if(item.style_type == 3) {
						let dic_values = JSON.parse(item.dic_values.value)
						retItem.options = Object.keys(dic_values).map( key => ({id: key, name:dic_values[key]}));
						retItem.index = '';
						retItem.type = 'select';
					} else if(item.style_type == 4){
					} else {
						retItem.type = 'input';
					}
					
					return retItem;
				})
				
				this.retData = retData;
				this.step = 1;
			}
		},
		async insertFacility() {
			let params = {};
			
			this.reportData.forEach(item => {
				if(item.field == 'coordinate') {
					params.x = item.value[0];
					params.y = item.value[1];
				} else if(item.field == 'remark') {
					params.remark = item.value;
				} else if(item.field == 'categoryTwo'){
					params.tableId = item.value;
				} else {
					
				}
			});
			
			this.rets.forEach(ret => {
				let obj = this.retData.find( item => ret.col_name == item.field);
				
				ret.value = obj.value;
				ret.creat_user = this.userInfo.nickName;
			});
			
			params.data = this.rets.slice(0);
			
			let {data, code} = await insertFacility(params);
			
			if (code == '200') {
				uni.showToast({
				  title: '新增设施成功',
				  icon: 'none',
				  duration: 2000
				})
				
				this.facilityId = data;
				this.step = 2;
			}
		},
		async imagesRelevanceFacility() {
			if(this.updateImageUrls.length == 0) {
				uni.showToast({
				  title: '图片不能为空',
				  icon: 'none',
				  duration: 2000
				});
				
				return;
			} 
			
			let params = {
				id: this.facilityId
			};
				
			let categoryTwo = this.reportData.find(item => item.field == 'categoryTwo');
			
			params.tableId = categoryTwo.value;
			params.images = this.updateImageUrls.map( url => url.fileName );
			
			let {msg, code} = await imagesRelevanceFacility(params);
			
			if (code == '200') {
				uni.showToast({
				  title: msg,
				  icon: 'none',
				  duration: 2000
				});
				
				this.clearData();
				this.$emit('finish');
				
				this.step = 0;
			}
		},
		async next() {
			if(this.step == 0){
				await this.getFacilitiesTableField();
			} else if (this.step == 1) {
				await this.insertFacility();
			} else {
				await this.imagesRelevanceFacility();
			}
		},
		init() {
			this.userInfo = uni.getStorageSync('userInfor');
			
			this.getAllDicts();
		}
	},
	watch: {
		position: {
			handler(val){
				this.setVal(val);
			},
			deep: true
		}
	},
	filters: {
		getDictLabel(value, arr, key, retKey = 'name') {
			let ret = '';
			let item = {};
	
			if (value !== undefined) {
				item = arr.find(item => item[key] == value);
				ret = item ? item[retKey] : ''
			}
			
			return ret;
		}
	},
	created() {
		this.init();
	},
	mounted() {}
}
</script>

<style lang="scss">
	.list-photo{
		padding: 0rpx 0rpx;
		.list-group{
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 0rpx 20rpx;
			.list-item{
				width: 33.33%;
				justify-content: center;
				flex-direction: row;
			}
		}
	}
	
	
	.card-a{
		padding: 14rpx;
		position: relative;
		top: 0px;
		left: 0px;
		.card-del{
			width: 27rpx;
			height: 27rpx;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			.card-del-icon{
				width: 27rpx;
				height: 27rpx;
			}
		}
		.card-content{
			width: 202rpx;
			height: 202rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #b4b4b4;
			background-color: #ffffff;
		}
		.pic{
			width: 198rpx;
			height: 198rpx;
		}
		
		.icon-add{
			width: 42rpx;
			height: 41rpx;
		}
	}
	
	
	.formbar{
		padding-bottom: 88rpx;
	}
	
	.form{
		.form-group{
			padding:0px 90rpx;
		}
		.form-item{
			display: flex;
			flex-direction: row;
			margin-bottom: 18rpx;
			.form-item-header{
				width: 160rpx;
				padding: 8rpx 0rpx;
				font-size: 32rpx;
				line-height: 40rpx;
				text-align: right;
			}
			.form-item-body{
				width: calc(100% - 160rpx);
				.form-control{
					padding: 10rpx 16rpx;
					font-size: 26rpx;
					line-height: 32rpx;
					border: 1rpx solid #b4b4b4;
					height: 56rpx;
					background-color: #fff;
					box-sizing: border-box;
				}
				
				.form-control2{
					width: auto;
					padding: 10rpx 16rpx 44rpx 10rpx;
					font-size: 30rpx;
					line-height: 32rpx;
					border: 1rpx solid #b4b4b4;
					height: 170rpx;
					background-color: #fff;
					box-sizing: border-box;
				}
				
				/* #ifdef H5 */
				.form-control2{
					width: 100%;
				}
				/* #endif */
			}
		}
		
		&.form-a{
			.form-item{
				flex-direction: column;
			}
		}
		
		&.form-a{
			.form-item-header{
				width: 100%;
				text-align: left;
			}
		} 
		
		&.form-a{
			.form-item-body{
				width: 100%;
			}
		} 
	}
	
	.select{
		height: 56rpx;
		border: 1rpx solid #b4b4b4;
		background-color: #fff;
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.select-selected{
			padding: 10rpx 72rpx 10rpx 16rpx;
			font-size: 26rpx;
			line-height: 32rpx;
		}
		.select-btn{
			width: 72rpx;
			height: 52rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.select-btn-icon{
				width: 28rpx;
				height: 14rpx;
			}
		}
	}
	
	.cals{
		height: 56rpx;
		border: 1rpx solid #b4b4b4;
		background-color: #fff;
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.cals-selected{
			padding: 10rpx 72rpx 10rpx 16rpx;
			font-size: 26rpx;
			line-height: 32rpx;
		}
		.cals-btn{
			width: 72rpx;
			height: 52rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			bottom: 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.cals-btn-icon{
				width: 36rpx;
				height: 29rpx;
			}
			
			
		}
	}
	
	
	.coord{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.coord-btn{
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 112rpx;
			height: 118rpx;
			padding: 24rpx 26rpx;
			border: 1rpx solid #7eb45d;
			font-size: 28rpx;
			line-height: 32rpx;
			color: #7eb45d;
			background-color: #eef8e8;
			box-sizing: border-box;
			
		}
		.coord-group{
			margin-right: 120rpx;
			.coord-item{
				margin-bottom: 6rpx;
			}
			
		}
	}
	
	.sate{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.sate-btn{
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 112rpx;
			padding: 12rpx 26rpx;
			border: 1rpx solid #7eb45d;
			font-size: 28rpx;
			line-height: 32rpx;
			color: #7eb45d;
			background-color: #eef8e8;
			box-sizing: border-box;
			
		}
		.sate-group{
			margin-right: 120rpx;
			.sate-item{
				margin-bottom: 6rpx;
			}
			
		}
	}
	
	.textarea{
		position: relative;
		top: 0rpx;
		left: 0rpx;
		.textarea-bot{
			position: absolute;
			bottom: 14rpx;
			right: 12rpx;
			font-size: 24rpx;
			line-height: 30rpx;
			color: #222222;
		}
	}
	
	
	.btns{
		.btns-group{
			padding: 20rpx 0rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			.btns-item{
				width: 352rpx;
				.btn{
					height: 70rpx;
					padding: 12rpx 0rpx 10rpx;
					font-size: 40rpx;
					line-height: 48rpx;
					color: #ffffff;
					background-image: linear-gradient(to right, #44afee, #3a8eed);
					.btn-label{
						font-size: 40rpx;
						line-height: 48rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
</style>
